<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shipping Address</title>
  <link rel="shortcut icon" href="https://material.io/favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link rel="stylesheet" href="bundle.css">
</head>
<body>
  <header class="crane-header">
    Shipping Address
  </header>

  <main class="crane-main">
    <form method="post" action="." id="crane-shipping-form">
      <div class="crane-row">
        <div class="crane-field">
          <div class="mdc-text-field">
            <input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
            <label class="mdc-floating-label" for="crane-name-input">
              Name
            </label>
            <div class="mdc-line-ripple"></div>
          </div>
        </div>
      </div>
      <div class="crane-row">
        <div class="crane-field">
          <div class="mdc-text-field">
            <input class="mdc-text-field__input" id="crane-address-input" type="text" required>
            <label class="mdc-floating-label" for="crane-address-input">
              Address
            </label>
            <div class="mdc-line-ripple"></div>
          </div>
        </div>
      </div>
      <div class="crane-row">
        <div class="crane-field">
          <div class="mdc-text-field">
            <input class="mdc-text-field__input" id="crane-city-input" type="text" required>
            <label class="mdc-floating-label" for="crane-city-input">
              City
            </label>
            <div class="mdc-line-ripple"></div>
          </div>
        </div>
      </div>
      <div class="crane-row">
        <div class="crane-field">
          <div class="mdc-select">
            <i class="mdc-select__dropdown-icon"></i>
            <select class="mdc-select__native-control" id="crane-state-input" required>
              <option value="" selected></option>
              <option value="AL">Alabama</option>
              <option value="AK">Alaska</option>
              <option value="AZ">Arizona</option>
              <option value="AR">Arkansas</option>
              <option value="CA">California</option>
              <option value="CO">Colorado</option>
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="DC">District Of Columbia</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="HI">Hawaii</option>
              <option value="ID">Idaho</option>
              <option value="IL">Illinois</option>
              <option value="IN">Indiana</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NV">Nevada</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NM">New Mexico</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="ND">North Dakota</option>
              <option value="OH">Ohio</option>
              <option value="OK">Oklahoma</option>
              <option value="OR">Oregon</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="SD">South Dakota</option>
              <option value="TN">Tennessee</option>
              <option value="TX">Texas</option>
              <option value="UT">Utah</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WA">Washington</option>
              <option value="WV">West Virginia</option>
              <option value="WI">Wisconsin</option>
              <option value="WY">Wyoming</option>
            </select>
            <label class="mdc-floating-label" for="crane-state-input">
              State
            </label>
            <div class="mdc-line-ripple"></div>
          </div>
        </div>
        <div class="crane-field">
          <div class="mdc-text-field">
            <!--
              Note: `pattern="[0-9]*"` tells Safari on iPhone to display a large numeric keypad without decimal points.
              See https://www.filamentgroup.com/lab/type-number.html
            -->
            <input class="mdc-text-field__input" id="crane-zip-code-input"
                   type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
            <label class="mdc-floating-label" for="crane-zip-code-input">
              ZIP Code
            </label>
            <div class="mdc-line-ripple"></div>
          </div>
        </div>
      </div>
      <div class="crane-row crane-row--submit">
        <button type="submit" class="mdc-button mdc-button--raised">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">Save</span>
        </button>
      </div>
    </form>
  </main>

  <script src="bundle.js" async></script>
</body>
</html>
